<template>
  <div :style="styleObject" v-show="show" @click="hide"></div>
</template>

<script>
  import { Observer } from '../core/util'
  export default {
    data() {
      return {
        styleObject: {
            width: innerWidth + 'px',
            height: innerHeight + 'px',
            opacity: 0,
            top: '0px',
            left: '0px',
            background: 'rgb(0, 0, 0)',
            position: 'fixed',
            'z-index': 9998
        },
        show: false,
        disableClick: false
      }
    },
    created: function () {
      var self = this;
      Observer.register('hidecloth', function () {
        self.disableClick = false;
        self.show = false;
      });
      Observer.register('showcloth', function (noClick) {
        if (noClick) {
          self.disableClick = true;
          return;
        }
        self.show = true;
        Observer.fire('execCommand', ['']);
      });
    },
    methods: {
      hide() {
        if (this.disableClick) return;
        this.show = false;
        Observer.fire('hidecloth');
        // 只进行光标聚焦
        Observer.fire('execCommand', ['']);
      }
    }
  }
</script>